<template>

  <section>
    <van-panel title="高温" :status="getHighTemperature.slice(0,-4) + '℃'">
      <van-slider @change="changeHigh" step="0.01" v-model="highValue" bar-height="4px" active-color="#FF4444" />
    </van-panel>
    <van-panel title="低温" :status="getLowTemperature.slice(0,-4) + '℃'">
      <van-slider @change="changeLow" step="0.01" v-model="lowValue" bar-height="4px" active-color="#1989FA" />
    </van-panel>
  </section>

</template>

<script>

import common from "../../../../util/index";
import {Slider,Panel,Button} from "vant/es";


export default {
  components:{
    [Button.name]:Button,
    [Slider.name]:Slider,
    [Panel.name]:Panel,
  },
  data(){
    return {
      highMax:41,
      highMin:37,
      highValue:0,//百分比
      lowMax:37,
      lowMin:33,
      lowValue:0,//百分比
    };
  },
  computed:{
    getHighTemperature(){
      return parseFloat(this.highMin + ((this.highMax - this.highMin) * (this.highValue / 100)) ).toFixed(6);
    },
    getLowTemperature(){
      return parseFloat(this.lowMin + ((this.lowMax - this.lowMin) * (this.lowValue / 100)) ).toFixed(6);
    },
  },
  mounted(){
    window.apiready = () =>{
      console.log("api ready");
      let highTemperature = this.getPrefsSync("local.highTemperature") || 38;
      let lowTemperature = this.getPrefsSync("local.lowTemperature") || 34;
      // console.log(highTemperature, lowTemperature);
      this.highValue = ((parseFloat(highTemperature)-this.highMin)/(this.highMax-this.highMin) * 100);
      this.lowValue = ((parseFloat(lowTemperature)-this.lowMin)/(this.lowMax-this.lowMin) * 100);
    };
  },
  methods:{
    changeHigh(value){
      // console.log(value);
      // console.log(this.getHighTemperature);
      this.setPrefs("local.highTemperature", this.getHighTemperature);
    },
    changeLow(value){
      // console.log(value);
      // console.log(this.getLowTemperature);
      this.setPrefs("local.lowTemperature", this.getLowTemperature);
    },
    // gw(){
    // console.log(this.highValue,this.getHighTemperature,this.lowValue,this.getLowTemperature);
    // this.setPrefs("lowTemperature","34.00");
    // this.setPrefs("highTemperature","38.00");
    // },
    ...common.methods,
  },
};
</script>
<style lang="scss">
  .van-slider{
    margin: 0 15px 30px;
  }
</style>
